<template>
    <view class="container">


        <tui-sticky :scrollTop="scrollTop" stickyHeight="104rpx">
            <template v-slot:header>
                <view class="sticky-item">
                    <view class="date">天天红包记录</view>
                    <view class="amount">
                        <view>已领取红包 ￥ {{ redMoney }}</view>
                    </view>
                </view>
            </template>

            <template v-slot:content>
                <!--内容 start-->
                <view v-for="(item, index) in billList" :key="index" class="list-view">
                    <view class="list-item" hover-class="hover" :hover-stay-time="150">
                        <view class="content-box">
                            <tui-icon name="redpacket-fill" :size="30" color="#F54847" class="logo"></tui-icon>
                            <view class="des-box">
                                <view class="tit">天天领红包</view>
                                <view class="time">{{ item.add_time }}</view>
                            </view>
                        </view>
                        <view class="money add">
                            <view>+{{ item.amount }}</view>
                        </view>
                    </view>
                </view>
                <!--内容 end-->
            </template>
        </tui-sticky>

        <!--加载loadding-->
        <tui-nomore :visible="!pullUpOn" bgcolor="#f7f7f7"></tui-nomore>
        <footer-menu :tabCur="2"></footer-menu>
    </view>
</template>

<script>
import footerMenu from "@/components/footer-menu.vue"
import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
import tuiSticky from "@/components/thorui/tui-sticky/tui-sticky"
import tuiLoadmore from "@/components/thorui/tui-loadmore/tui-loadmore"
import tuiNomore from "@/components/thorui/tui-nomore/tui-nomore"
import tuiTag from "@/components/thorui/tui-tag/tui-tag"
export default {
    components: {
        footerMenu,
        tuiIcon,
        tuiSticky,
        tuiLoadmore,
        tuiNomore,
        tuiTag
    },
    data() {
        return {
            scrollTop: 0,
            pullUpOn: false,

            myInfo: [],
            billList: [],
            pageIndex: 1,
            pageCount: 0,
            pageTotal: 0,


        }
    },
    computed: {
        redMoney() {
            const redMoney = this.billList.reduce((pre, cur) => pre + Number(cur.amount), 0)
            return redMoney.toFixed(2)
        }
    },
    methods: {
        getBillList: function (type) {
            if (type != 'append') this.pageIndex = 1;
            uni.request({
                url: this.$apiUrl + '/api/user/red_money_list',
                header: {
                    'userId': uni.getStorageSync('userId'),
                    'userToken': uni.getStorageSync('userToken'),
                    'shopId': uni.getStorageSync('shopId')
                },
                data: {
                    page_num: this.pageIndex
                },
                success: (res) => {
                    this.billList = res.data.data
                }
            });
        },

        //得到我的个人信息
        getMyBaseInfo: function () {
            uni.request({
                url: this.$apiUrl + '/api/user/baseInfo',
                header: {
                    'userId': uni.getStorageSync('userId'),
                    'userToken': uni.getStorageSync('userToken'),
                    'shopId': uni.getStorageSync('shopId')
                },
                success: (res) => {
                    let resData = res.data['data'];
                    this.myInfo = resData;
                }
            });
        },

    },


    //页面滚动执行方式
    onPageScroll(e) {
        //	this.scrollTop= e.scrollTop
    },

    onLoad: function (options) {
        this.getBillList();
        this.getMyBaseInfo();
    },


    onPullDownRefresh: function () {
    },



}
</script>

<style>
.container {
    padding-bottom: env(safe-area-inset-bottom);
}

.tips {
    background: #fff;
    padding: 50rpx 34rpx;
    color: #555;
    font-size: 24rpx;
    line-height: 42rpx;
    position: relative;
}

.tips::before {
    content: '';
    position: absolute;
    border-top: 1rpx solid #eaeef1;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    top: 0;
    right: 0;
    left: 0;
}

/* .sticky-container{
 position: relative;
} */
/* sticky 容器 start */
.sticky-item {
    width: 100%;
    height: 104rpx;
    padding: 20rpx 30rpx;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

/* sticky 容器 end */

.date {
    height: 54rpx;
    font-size: 28rpx;
    background: #fff;
    padding: 0 28rpx;
    border-radius: 25rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* box-shadow: 0 0 1rpx #7A7A7A; */
}

.date::after {
    content: '';
    position: absolute;
    height: 200%;
    width: 200%;
    border: 1rpx solid #eaeef1;
    border-radius: 60rpx;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    left: 0;
    top: 0;
}

.amount {
    text-align: right;
    color: #7A7A7A;
    font-size: 24rpx;
}

.list-view {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.list-view::after {
    content: '';
    position: absolute;
    border-top: 1rpx solid #eaeef1;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    top: 0;
    right: 0;
    left: 0;
}

.list-item {
    width: 100%;
    padding: 30rpx 28rpx;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.list-item::after {
    left: 120rpx
}

.item-last::after {
    left: 0 !important
}

.content-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.logo {
    width: 60rpx;
    height: 60rpx;
    flex-grow: 1
}

.des-box {
    min-height: 100rpx;
    padding-left: 28rpx;
    box-sizing: border-box;
    vertical-align: top;
    color: #333;
    font-size: 24rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tit {
    font-size: 32rpx;
    max-width: 420rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.remark {
    font-size: 24rpx;
    max-width: 420rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #999;
}

.time {
    font-size: 24rpx;
    color: #888
}

.money {
    font-size: 38rpx;
    font-weight: 500;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 20rpx;
}

.add {
    color: #ff5800 !important;
}

.del {
    color: #19be6b !important;
}
</style>
